<template>
  <view class="recharge">
    <!-- <RuleList :data="list" /> -->
    <view v-for="(item, index) in list" :key="index" class="rule-item">
      <RuleListItem ref="ruleItem" :data="item" @close="onClose" />
    </view>
    <!-- <RuleListItem ref="ruleItem" :data="list[0]" @close="onClose" /> -->
    <TypeSelect ref="typeSelect" v-model="type" :options="options" @change="onTypeChange" @select="onTypeSelect" />
    <FooterButton v-if="list.length==0" @click.native="addRule">添加规则</FooterButton>
    <FooterButton v-else @click.native="saveRule">保存</FooterButton>
  </view>
</template>

<script>
import FooterButton from "../../components/public/Button/FooterButton.vue";
import TypeSelect from "../../components/public/TypeSelect/index.vue";
import RuleList from "./components/RuleList.vue";
import RuleListItem from "./components/RuleListItem.vue";
import { mapActions, mapState, mapMutations } from "vuex";
import { promotionTypes } from "../../config/status";
export default {
  components: { FooterButton, RuleList, TypeSelect, RuleListItem },
  data() {
    return {
      type: 0,
      options: promotionTypes.map(v => {
        return { value: v.type, label: v.label };
      })
    };
  },
  computed: {
    ...mapState({
      list: state => state.member.promotionList
    })
  },
  onShow() {
    this.getPromotions();
  },
  methods: {
    ...mapActions({
      getPromotions: "getPromotions",
      postPromotions: "postPromotions",
      closePromotions: "closePromotions"
    }),
    ...mapMutations({
      SET_PROMOTION_LIST: "SET_PROMOTION_LIST"
    }),
    addRule() {
      // this.$goto("rechargeRule");
      // this.$refs.typeSelect.open();
      let rule = {
        type: 1,
        config: [{ amount: null, giveAmount: null }]
      };
      this.SET_PROMOTION_LIST([rule]);
    },
    saveRule() {
      let data = this.$refs.ruleItem[0].getData();
      if (data) {
        uni.showLoading();
        this.postPromotions(data)
          .then(res => {
            if (!res.code) {
              uni.showToast({
                title: "保存成功",
                icon: "none"
              });
              this.$back();
            }
          })
          .finally(res => {
            uni.hideLoading();
          });
      }
    },
    onClose(data) {
      let type = data.type;
      if (data.id) {
        uni.showLoading();
        this.closePromotions(type)
          .then(res => {
            if (!res.code) {
              this.SET_PROMOTION_LIST([]);
            }
          })
          .finally(res => {
            uni.hideLoading();
          });
      } else {
        this.SET_PROMOTION_LIST([]);
      }
    },
    onTypeChange() {},
    onTypeSelect(type) {
      // "createdAt": "2020-06-12 15:18:01",
      // "updatedAt": "2020-06-12 15:18:01",
      // "id": 6,
      // "shopId": 2,
      // "type": 1,
      // "config": [{ "amount": 200, "giveAmount": 20 }, { "amount": 300, "giveAmount": 30 }],
      // "status": 1
      let rule = {
        type: type,
        config: [{ amount: null, giveAmount: null }]
      };
      this.SET_PROMOTION_LIST([rule]);
    }
  }
};
</script>

<style lang="scss">
.recharge {
  padding: 20rpx 30rpx;
  padding-bottom: 120rpx;
}
</style>
